body {
    background-color: #b7d7e8;
  }
  
  * {
    font-family: 'Trebuchet MS', sans-serif
  }

  html, body {
    width:  100%;
    height: 100%;
    margin: 0;
  }

  canvas {
    background-color: #00000000;
    display: block;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
  }

  input {
    background-color: #daebe8;
    border: none;
  }

  select {
    background-color: #daebe8;
  }

  h1, h2, h3, h4, h5 {
    text-shadow: 2px 2px #b7d7e8;
  }

  a, p, td {
    text-shadow: 1px 1px #b7d7e8;
  }

  div[id*="fact"] h4, div[id*="fact"] h5, div[id*="fact"] p {
    text-shadow: 1px 1px #f9ccac;
  }

  a {
    color: #87bdd8;
    background-color: transparent;
    text-decoration: none;
  }

  div[id*="content"] {
    outline: 2px double #daebe8;
    background-color: #cfe0e8;
    padding: 10pt;
  }

  [id*="fact"] {
    background-color: #fbefcc;
    padding: 6px;
  }

  [id*="common"], label[id*="common"] {
    background-color: #7eef6d;
  }

  [id*="unusual"], label[id*="unusual"] {
    background-color: #ffe65d;
  }

  [id*="rare"], label[id*="rare"] {
    background-color: #4d52e3;
  }

  [id*="epic"], label[id*="epic"] {
    background-color: #861fde;
  }

  [id*="legendary"], label[id*="legendary"] {
    background-color: #de1f1f;
  }

  [id*="mythic"], label[id*="mythic"] {
    background-color: #1fdbde;
  }

  [id*="ultra"], label[id*="ultra"] {
    background-color: #ff2b75;
  }

  [id*="super"], label[id*="super"] {
    background-color: #2bffa3;
  }

  [id*="unique"], label[id*="unique"] {
    background-color: #555555;
  }
  
  button {
    background-color: #b7d7e8;
    border: none;
    border-radius: 10px;
    box-shadow: 0px 2px #87bdd8;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 10px;
  }

  button:hover {
    box-shadow: none;
    margin-top: 4px;
    margin-bottom: 0px;
  }